<template lang="pug">
  .m-content
    .title 业务流程
    .main
      .searchs
        el-row(:gutter="10")
          el-col(:span="6")
            .flex-block
              .name 创建人
              el-select.select( v-model="postConditions.user")
          el-col(:span="6")
            .flex-block
              .name 流程类型
              el-select.select( v-model="postConditions.type")
          el-col(:span="6")
            .flex-block
              .name 状态
              el-select.select( v-model="postConditions.status")
          el-col(:span="6")
            .searchTypeInput
              el-input( placeholder="请输入流程名称关键字" prefix-icon="el-icon-search" v-model="postConditions.keyword"  @keyup.enter.native="filterConditions")
      .line
      .operation
        el-button(type="primary" icon="el-icon-plus") 创建
        el-button(type="danger" icon="el-icon-delete") 删除
      .table
        tr-table(:selection="true" :data="data" :columns="columnsData" :filterWidth="260"  @selection-change="selectionChange")
          template(slot-scope="scope")
            el-button(type="text" icon="iconfont icon-bianji" ) 编辑
            el-button(type="text" icon="iconfont icon-liuchengpeizhi" ) 流程配置
            el-button(type="text" icon="iconfont icon-xiaxian " ) 下线
            el-popover(trigger="click" popper-class="btns-more")
              ul
                li
                  a(href="javascript:;" class="el-button--text")
                    i(class="iconfont icon-lishijilu ")
                    | 历史纪录
                li
                  a(href="javascript:;" class="delete")
                    i(class="iconfont icon-shanchu ")
                    | 删除
              el-button(type="text" class="el-more" icon="el-icon-more"  slot="reference" )

      Pagination(:total="total" :page.sync="listQuery.page_no" :limit.sync="listQuery.page_size" @pagination="query" )
</template>

<script>
import Pagination from '@/components/Pagination'
import ttable from '@/components/table'
const defaulConditions = {
  user: '', // 归属地市
  type: '', // 状态
  status: '', // 查询类型key
  input: '' // 查询类型value
}

let data = [{
  name: '新装1',
  user: '张三',
  type: '天翼云-云主机-新装',
  startAt: '2018-12-23 14:23:00',
  updateAt: '2018-12-23 14:23:00',
  status: '上线'
}, {
  name: '新装2',
  user: '张三',
  type: '天翼云-云主机-新装',
  startAt: '2018-12-23 14:23:00',
  updateAt: '2018-12-23 14:23:00',
  status: '上线'
}]
export default {
  components: { Pagination, ttable },
  data () {
    return {
      postConditions: Object.assign({}, defaulConditions),
      columnsData: [
        { prop: 'name', label: '流程名称' },
        { prop: 'user', label: '创建人' },
        { prop: 'type', label: '流程类型' },
        { prop: 'startAt', label: '创建时间' },
        { prop: 'updateAt', label: '更新时间' },
        { prop: 'status', label: '状态' }
      ],
      data,
      total: 0,
      listQuery: {
        page_no: 1,
        page_size: 10
      }
    }
  },
  methods: {
    selectionChange (val) {
      console.log(val)
    },
    query () {

    },
    filterConditions () {

    },
    test (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="stylus" scoped>
.m-content
  .line
    border-top 1px solid #e8e8e8
    margin 15px 0
  >>>
    .el-more
      margin-left 10px
</style>
